<template>
    <div class="CompontensViews">
        <div class="scroo">

            <div class="tips">
                <span>関連図書</span>
                <div>
                    <el-button type="default" size="mini" @click="isShow = true">フォルダーを開く</el-button>
                    <el-button type="default" size="mini" @click="isUpShow = true"><i class="iconfont"
                            style="font-size:16px;">&#xe825;</i>アップロード</el-button>
                    <el-button type="default" size="mini" @click="downLoadFn"><i class="iconfont"
                            style="font-size: 20px;"></i>ダウンロード</el-button>
                </div>
            </div>

            <ux-grid class="ux-table" ref="singleTable" :data="Data" :header-cell-style="{
                color: 'rgba(0, 0, 0, 0.85)',
                fontSize: '14px',
                textAlign: 'left',
                fontWeight: 'bold',
                padding: 0,
                height: '32px',
                background: 'rgb(244,245,246)'
            }" :cell-style="{
                color: 'rgba(96,98,102,1)',
                fontSize: '14px',
                textAlign: 'left',
                padding: 0,
                height: '32px',
            }" :checkbox-config="{
                showHeader: false,
            }" @current-change="handleCurrentChange" highlight-current-row element-loading-spinner="el-icon-loading"
                element-loading-background="#f8f8f8" :element-loading-text="$t('message.bhView.loading')">
                <template slot="empty"> No data </template>

                <ux-table-column property="label" title="図書タイトル" width="429" align="left">
                    <template slot-scope="scope">
                        <el-input class="table-input left" v-model="scope.row.bookTil"
                            @input="scope.row.bookTil = $setMaxLength(scope.row.bookTil, 20)"></el-input>
                    </template>
                </ux-table-column>
                <ux-table-column property="label" title="ファイル名" width="429" align="left">
                    <template slot-scope="scope">
                        <el-input class="table-input left" v-model="scope.row.bookName" readonly
                            @input="scope.row.bookName = $setMaxLength(scope.row.bookName, 200)"></el-input>
                    </template>
                </ux-table-column>
                <ux-table-column property="label" title="操作" width="138" align="left">
                    <template slot-scope="scope">
                        <p style="color:#106EBE;cursor: pointer; text-align: left;">
                            <span @click="delFn(scope.row)">削除</span>
                        </p>
                    </template>
                </ux-table-column>

            </ux-grid>
        </div>


        <tabFiveTabelShow v-if="isShow" type="basic" title="報告書フォルダ" @close="isShow = false" @getResponse="getResponse">
        </tabFiveTabelShow>
        <ImportDialogForPic v-if="isUpShow" :_api="api" @close="isUpShow = false" :title="title"
            @getResponse="getResponse" :type="5">
        </ImportDialogForPic>
    </div>
</template>

<script>
import { GetRelatedBooks, getFileTit, GetSysIntelligenceMsg } from "@/api/api";
import eventBus from "@/eventBus/bus";
import { showLoading, hideLoading } from "@/utils/loading";
import tabFiveTabelShow from '@/components/TabelLineCadViews/BSDetailConmpontents/tabFiveTabelShow.vue';
import ImportDialogForPic from '@/components/Excel/ImportDialog/ImportDialogForPic.vue'


import _ from 'lodash-es';
export default {
    name: "BasicStyleCompontens",
    props: ["PltCode", "Code"],
    data() {
        return {
            tabs_list: [
                { title: "系統情報", },
                { title: "損傷要因", },
                { title: "関連図書", },
            ],
            activeFlag: 0,
            prposTabelData: [],
            Data: {},
            DataClone: {},
            isShow: false,
            isUpShow: false,
            api: '/api/Visual/upLoadBookRelaAssFileToReportFolder',
            title: this.$t("message.BSCps.tabs.label_5"),
            handleRow: {},
        };
    },
    components: {
        tabFiveTabelShow, ImportDialogForPic,
    },
    watch: {
        PltCode: {
            handler(newName, oldName) {
                this.GetSysIntelligenceFn();
            },
            immediate: true,
            deep: true,
        },
        Code: {
            handler(newName, oldName) {
                console.log(newName);
                this.GetSysIntelligenceFn();
            },
            immediate: true,
            deep: true,
        },
        Data: {
            handler(newName, oldName) {
                this.$emit('isChangeFlgFn', _.isEqual(this.Data, this.DataClone))
            },
            immediate: true,
            deep: true,
        },
    },
    computed: {

    },
    methods: {
        async delFn(row) {
            // let tips = await this.GetSysIntelligenceMsgFn();
            // this.$confirm(tips, '', {
            //     confirmButtonText: this.$t("message.public.confirm"),
            //     cancelButtonText: this.$t("message.public.cancel"),
            //     type: "warning",
            // })
            //     .then(() => {
            var temp = 0;
            this.Data = this.Data.filter((item, index) => {
                if (item.bookNo == row.bookNo) {
                    console.log(item);
                    temp = index != 0 ? index - 1 : 0;
                    console.log(temp, index);
                }
                return item.bookNo != row.bookNo
            })
            if (this.Data.length == 0) {
                this.handleRow = {};
                return
            }
            this.handleRow = this.Data[temp];
            this.$refs.singleTable.setCurrentRow(this.Data[temp]);
            // })
            // .catch(() => { });
        },
        //  获取提示信息
        async GetSysIntelligenceMsgFn() {
            let dataJson = {
                PltCode: this.PltCode,
                MacName: this.handleRow.bookTil,
                type: 3
            };
            let res = await GetSysIntelligenceMsg(dataJson);
            return res.data.msg;
        },
        handleCurrentChange(val) {
            console.log(val)
            this.handleRow = val;
        },
        downLoadFn() {
            // showLoading();
            if (this.Data.length == 0 || !this.handleRow.bookPath) {
                hideLoading();
                return
            }
            if (this.handleRow) {
                // サブフォルダ対応：表示上はサブフォルダ表示もダウンロード時はファイル名指定
                const fileName = this.handleRow.bookName.split('\\').pop();
                this.$downFileByBlob({ path: this.handleRow.bookPath, isDown: true, fileName: fileName, isOpenNewBlank: false })
            }
            hideLoading();
        },
        async getResponse(arr) {
            console.log(arr);
            // this.$message.success("OK");
            let bookTil = await this.getFileTitFn();
            arr.forEach(item => {
                this.Data.push({
                    bookName: item.showPath || `${item.name}.${item.ext}`,
                    bookNo: this.Data.length + 1,
                    bookPath: item.path,
                    bookTil: `${bookTil}${this.Data.length + 1}`,
                    fileId: item.id,
                })
            })
        },
        async getFileTitFn() {
            let dataJson = {};
            let res = await getFileTit(dataJson);
            return res.data.data;
        },
        async GetSysIntelligenceFn() {
            this.Data = [];
            this.DataClone = [];
            this.handleRow = {};
            let dataJson = {
                PltCode: this.PltCode || this.$store.state.pltCode,
                Code: this.Code || -1,
            };
            let res = await GetRelatedBooks(dataJson);
            if (res.data.code != 0) {
                this.Data = [];
                this.DataClone = [];
                this.handleRow = {};
                return
            }
            this.Data = _.cloneDeep(res.data.data);
            this.DataClone = _.cloneDeep(res.data.data);
            // this.handleRow = this.Data[0];
            // this.$refs.singleTable.setCurrentRow(this.handleRow);
        }
    },

    created() {
    },
    mounted() {
    },
    beforeDestroy() { },
    destroyed() { },
};
</script>
<style lang="scss" scoped>
.CompontensViews {
    max-width: 71.2%;
    max-height: 93.7%;
    position: relative;
    overflow: scroll;
    border: 1px solid #ccc;

    &::-webkit-scrollbar {
        width: 0;
    }


    .scroo {
        width: 1020px;
        padding: 8px 6px 0 16px;

        .row {
            margin-top: 8px;
            display: flex;
            align-items: center;

            .label {
                width: 100px;
                min-width: 100px;
                max-width: 100px;
                padding-right: 3px;
            }

            .iptbox {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;

                >.ipt:nth-child(1) {
                    width: 37%;
                    height: 32px;

                    ::v-deep .el-input__inner {
                        width: 100%;
                        height: 32px;
                    }
                }

                >.ipt:nth-child(2) {
                    width: 50%;
                    height: 32px;

                    ::v-deep .el-input__inner {
                        width: 100%;
                        height: 32px;
                    }
                }

                >.ipt:nth-child(3) {
                    width: 10%;
                    height: 32px;

                    ::v-deep .el-input__inner {
                        width: 100%;
                        height: 32px;
                    }
                }
            }



            .orange {
                ::v-deep .el-input__inner {
                    background-color: #FEDDB1;
                }
            }
        }

        .row1 {
            margin-top: 8px;
            display: flex;

            .label {
                width: 100px;
                min-width: 100px;
                max-width: 100px;
                padding-right: 3px;
            }

            .iptAreaBox {
                width: 100%;

                ::v-deep .el-textarea__inner {
                    width: 100%;
                }
            }
        }
    }

    .tips {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 0;
        font-weight: 700;

        .el-button {
            height: 28px;
            line-height: 0px;
            line-height: 0;
            height: 28px !important;
            width: 140px !important;
            margin: 0 0 0 10px;
        }
    }


    .table-input {
        ::v-deep .el-input__inner {
            background: none;
            border: 0 none;
            padding: 0;
            // height: 32px;
        }
    }

    .center {
        ::v-deep .el-input__inner {
            text-align: center;
        }
    }

    .ux-table {
        ::v-deep .elx-table--body-wrapper {
            height: 502px !important;
        }
    }


    ::v-deep .elx-table--empty-placeholder {
        // margin-top: 50px;
        height: 100% !important;
    }
}
</style>
